//省分组检查统计页面
<template>
  <!-- 面包屑导航，展示当前页面的层级 -->
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>省分组分项检查统计</el-breadcrumb-item>
  </el-breadcrumb>
  <el-alert
    title="省分组分项检查统计"
    type="success"
    effect="dark"
    :closable="false"
    style="width: 80%; margin: 20px 0"
  />

  <!-- 表格展示省分组分项检查统计数据 -->
  <div class="table-box">
    <el-table
      :data="provinceItemTotalArr"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
      style="width: 100%"
    >
      <!-- 列设置 -->
      <el-table-column prop="provinceId" label="省编号" width="90" />
      <el-table-column prop="provinceAbbr" label="省简称" />
      <el-table-column prop="provinceName" label="省名称" />
      <el-table-column prop="so2Total" label="SO2超标累计" />
      <el-table-column prop="coTotal" label="CO超标累计" />
      <el-table-column prop="spmTotal" label="PM2.5超标累计" />
      <el-table-column prop="aqiTotal" label="AQI超标累计" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";

// 注入全局的axios实例，用于发送HTTP请求
const axios = inject("axios");

// 定义响应式变量，用于存储省分组分项检查统计数据
const provinceItemTotalArr = ref([]);

// 初始化函数，用于获取省分组分项检查统计数据
const init = () => {
  // 发送请求获取省分组分项检查统计数据
  axios
    .post("statistics/listProvinceItemTotalStatis")
    .then((response) => {
      provinceItemTotalArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
}
</style>

<!--http://localhost:8080/nepm/statistics/listProvinceItemTotalStatis（省分组分项检查统计接口）-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：provinceItemTotalArr.value（通过ref()创建的响应式引用，用于存储从接口获取的省分组分项统计数据）-->

<!--数据渲染方式-->
<!--使用el-table组件以表格形式展示数据-->
<!--通过:data="provinceItemTotalArr"将响应式数组绑定到表格-->
<!--表格包含7列，分别显示：-->
<!--provinceId（省编号，宽度设为90px）-->
<!--provinceAbbr（省简称）-->
<!--provinceName（省名称）-->
<!--so2Total（SO2超标累计）-->
<!--coTotal（CO超标累计）-->
<!--spmTotal（PM2.5超标累计）-->
<!--aqiTotal（AQI超标累计）-->
<!--使用empty-text="无数据"设置当数据为空时的提示文本-->
<!--通过CSS设置了表格容器的样式（80%宽度，450px高度，带滚动条）-->